<template>
  <div class="page-container">
    <el-container>
      <el-aside class="page-aside" width="200px" v-drag v-collapse>
        <div class="title">券商列表</div>
        <div class="page-aside-grow">
          <div class="broker">
            <div
              v-for="broker in brokerList"
              @click="clickBroker(broker)"
              class="broker-item"
            >{{broker.name}}</div>
          </div>
        </div>
      </el-aside>
      <el-main class="page-main">
        <cm-table
          ref="dataTable"
          pkName="id"
          :filters="filters"
          :filterFields="filterFields"
          :columns="columns"
          @handleTableOperator="handleTableOperator"
          @handleCellOperator="handleCellOperator"
        />
      </el-main>
    </el-container>
  </div>

  <!--新增/编辑/查看界面-->
  <el-dialog
    width="500px"
    v-model="dialogVisible"
    :title="dialogTitle"
    :close-on-click-modal="false"
    destroy-on-close
    draggable
  >
    <el-form
      :model="formData"
      ref="dataForm"
      label-width="120px"
      label-position="right"
      :disabled="!dialogEdit"
      :rules="rules"
      :hide-required-asterisk="!dialogEdit"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="券商名称" prop="brokerId">
            <el-select v-model="formData.brokerId" placeholder="--请选择--">
              <el-option
                v-for="broker in brokerList"
                :key="broker.id"
                :label="broker.name"
                :value="broker.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="资金账号" prop="account">
            <el-input v-model="formData.account"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="资金账号类型" prop="accountType">
            <cm-select v-model="formData.accountType" dic-code="dicAccountType" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="初始金额" prop="initMoney">
            <cm-number v-model="formData.initMoney" :point="2" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="当前金额" prop="currMoney">
            <cm-number v-model="formData.currMoney" :point="2" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="抽拥金额" prop="commMoney">
            <cm-number v-model="formData.commMoney" :point="2" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="!dialogEdit">
        <el-col :span="24">
          <el-form-item label="更新时间" prop="updateTime">
            <el-input v-model="formData.updateTime"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="!dialogEdit">
        <el-col :span="24">
          <el-form-item label="创建时间" prop="createTime">
            <el-input v-model="formData.createTime"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button
        v-if="dialogEdit"
        size="large"
        type="info"
        @click="dialogVisible=false"
      >取消</el-button>
      <el-button
        v-if="dialogEdit"
        size="large"
        type="primary"
        @click.native="submitForm"
        :loading="editLoading"
      >提交</el-button>
      <el-button
        v-if="!dialogEdit"
        size="large"
        type="info"
        @click="dialogVisible=false"
      >关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import {ElMessage, ElMessageBox} from 'element-plus';
import api from "@/http/api";

const brokerList = ref([]);

const filters = ref({
  brokerName: '',
  account: '',
  brokerId: ''
});
// 分页查询条件
const filterFields = ref([
  {prop: "brokerName", label: "券商名称"},
  {prop: "account", label: "资金账号"}
]);

// 分页列表字段
const columns = ref([
  {prop: "brokerName", label: "券商名称", minWidth: 120},
  {prop: "account", label: "资金账号", minWidth: 120},
  {prop: "accountType", label: "资金账号类型", minWidth: 120, type: 'radio', dicCode: 'dicAccountType'},
  {prop: "initMoney", label: "初始金额", minWidth: 120},
  {prop: "currMoney", label: "当前金额", minWidth: 120},
  {prop: "commMoney", label: "抽拥金额", minWidth: 120},
  {prop: "updateTime", label: "更新时间", width: 160, onlyShow: true},
  {prop: "createTime", label: "创建时间", width: 160, onlyShow: true},
]);

// 表单数据验证规则
const rules = ref({
  brokerId: [
    {required: true, message: '请输入券商ID', trigger: ['change', 'blur']},
    {max: 20, message: '长度必须小于等于 20 个字符！', trigger: ['change', 'blur']}
  ],
  account: [
    {required: true, message: '请输入资金账号', trigger: ['change', 'blur']},
    {max: 20, message: '长度必须小于等于 20 个字符！', trigger: ['change', 'blur']}
  ],
  accountType: [
    {required: true, message: '请输入资金账号类型', trigger: ['change', 'blur']},
    {max: 20, message: '长度必须小于等于 20 个字符！', trigger: ['change', 'blur']}
  ],
  initMoney: [
    {required: true, message: '请输入初始金额', trigger: ['change', 'blur']}
  ],
  currMoney: [
    {required: true, message: '请输入当前金额', trigger: ['change', 'blur']}
  ],
});

const dataTable = ref(); // 弹窗表单数据
const dataForm = ref(); // 弹窗表单数据
const formData = ref({}); // 弹窗表单数据
const dialogTitle = ref(''); // 新增/编辑/查看弹窗标题
const dialogVisible = ref(false); // 弹窗是否显示
const editLoading = ref(false); // 弹窗表单提交状态
const dialogEdit = ref(false); // 弹窗是否编辑

const handleCellOperator = (property, value, row) => {
  formData.value = Object.assign({}, row);
  dialogVisible.value = true;
  dialogEdit.value = false;
  dialogTitle.value = "查看";

  nextTick(() => {
    dataForm.value && dataForm.value.clearValidate();
  });
};

// 显示操作界面
const handleTableOperator = (button, row) => {
  dialogVisible.value = true;
  dialogEdit.value = true;
  dialogTitle.value = button.buttonName;

  if (button.buttonType === 'edit') {
    formData.value = Object.assign({}, row, {button: button});
  } else {
    formData.value = {brokerId: filters.value.brokerId || '', button: button};
  }

  nextTick(() => {
    dataForm.value && dataForm.value.clearValidate();
  });
};

// 表单提交
const submitForm = () => {
  dataForm.value && dataForm.value.validate((valid) => {
    if (valid) {
      ElMessageBox.confirm('请确认是否提交？', '提示', {type: 'info'}).then(() => {
        editLoading.value = true;
        api.post(formData.value.button.dataDestUrl, formData.value).then(res => {
          ElMessage.success(res.message);
          dialogVisible.value = false;
          dataTable.value.findPage();
          editLoading.value = false;
        }).catch(() => {
          editLoading.value = false;
        })
      });
    } else {
      ElMessage.error('数据录入不正确，请重新检查！');
    }
  })
};

const loadBrokerList = () => {
  api.post('/broker/queryList').then(res => {
    brokerList.value = res.data || [];
  });
};

const clickBroker = (broker) => {
  filters.value.brokerId = broker.id || '';
  dataTable.value.findPage();
};

onMounted(() => {
  loadBrokerList();
});
</script>

<style scoped>
.title {
  font-weight: 800;
}
.broker {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.broker-item {
  height: 26px;
  line-height: 26px;
  cursor: pointer;
  padding-left: 10px;
}
.broker-item:hover {
  background: #f5f7fa;
}
</style>